<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-circle-plus"
        @click="$router.push(add_url)"
        >添加</el-button
      >
    </div>
    <el-table
      :data="tableData"
      v-loading="loadList"
      element-loading-text="拼命加载中..."
      border
    >
      <el-table-column prop="productName" label="商品名称"></el-table-column>
      <el-table-column prop="productImage" label="产品主图片" width="100px">
        <template slot-scope="scope">
          <img
            :src="scope.row.productImage"
            style="width: 50px; height: 50px"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="productDetailImage"
        label="产品详情图"
        width="100px"
      >
        <template slot-scope="scope">
          <img
            :src="scope.row.productDetailImage"
            style="width: 50px; height: 50px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="jifen" label="积分"></el-table-column>
      <el-table-column prop="jifenAndPrice" label="积分+价格"></el-table-column>
      <el-table-column prop="count" label="库存"></el-table-column>

      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
         

          <el-button size="mini" @click="edit(scope.row.productId)">修改</el-button>
          <el-button size="mini" type="danger" @click="del(scope.row.productId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!loadList" class="pagination-container">
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total"
      ></el-pagination> -->
    </div>
  </div>
</template>

<script>
import { getList, del } from "./api/index";
export default {
  data() {
    return {
      loadList: true,
      tableData: [],
      // getListFunc: Service.getList,
      // delItemFunc: Service.delItem,
      add_url: "/aquare/product/addproduct/add",
      edit_url: (id) => {
        return `/aquare/product/addproduct/${id}/edit`;
      },
    };
  },
  created() {
    this.refresh_data();
  },
  methods: {
    // 获取置顶卡列表
    refresh_data() {
      getList()
        .then((data) => {
          console.log(data, "=====");
          if (data.code === 1) {
            data.data.forEach((i) => {
              i.payWay.forEach((t) => {
                if (t.jifen === 0) {
                  i.price = t.price;
                  i.priceId = t.id;
                }
                if (t.price === 0) {
                  i.jifen = t.jifen;
                  i.jifenId = t.id;
                }
                if (t.price !== 0 && t.jifen !== 0) {
                  i.jifenAndPrice = `${t.jifen}+${t.price}`;
                  i.jifenAndPriceId = t.id;
                }
              });
            });
            this.tableData = data.data;
          } else {
            this.$message.error(data.description);
          }
          this.loadList = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadList = false;
        });
    },
    edit(id) {
      this.$router.push(this.edit_url(id));
    },
    async del(item) {
      this.$confirm("确认删除该条数据？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.loadList = true;
        const res = await del(item);
        if (res.code === 1) {
          this.refresh_data();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
